import React from 'react'
import {NavLink,useRoutes,Navigate} from 'react-router-dom'
import AddUser from './pages/AddUser'
import Index from './pages/Index'
import Login from './pages/Login'
import PageNotFound from './pages/PageNotFound'
import User from './pages/User'
import UserInfo from './pages/UserInfo'
/**
 * 路由： key ==》 value 的键值对
 * key 路径  value 路由组件
 * 定义： Routes Route
 * 1. Route  ： path     element
 *    1-1. 访问根路径我们要展示什么组件》？   重定向 <Navigate to='/index'/>
 *    1-2. 404 : path 不存在的情况， path='*'
 * 
 * 2. 链接跳转：    NavLink     Link
 * 
 *    1. 区别：     active     没有
 *    2. 自定类名   isActive
 * 
 * 
 * 快速的配置 path 和 element 对应关系  ===> 路由表[数组]
 * 
 */
const routes = [
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/index',
        element:<Index/>
    },
    {
        path:'/user',
        element:<User/>,
        // 配置二级路由
        children:[
            {
                // 完整写法： 
                // path:'/user/userInfo'
                path:'userInfo',
                element:<UserInfo/>
            },
            {
                path:'addUser',
                element:<AddUser/>
            }
        ]
    },
    {
        index:true,
        element:<Navigate to='/index'/>
    },
    {
        path:'*',
        element:<PageNotFound/>
    }
]
export default function App() {
    
    return (
        <div>
            <h3>App</h3>
            <ul>
                <li><NavLink to='/'>重定向到首页</NavLink></li>
                <li><NavLink to='/index'> 首页</NavLink></li>
                <li><NavLink to='/user'> 用户页</NavLink></li>
                <li><NavLink to='/login'> 登录页</NavLink></li>
            </ul>
            {useRoutes(routes)}
        </div>
    )
}
